<template>
  <div style="flex: 1;display: flex;flex-direction: column;">
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
      </a>
    </div>
    <div class="pageClass">
      <div class="goodsItem">
        <img :src="goodsItemDetails.goodsImg" style="width: 50%;border-radius: 5px;"/>
        <div style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;padding: 10px;border-bottom:1px solid #4a4a4a;margin-left: 15px;">
          <b style="font-size: 18px;margin-bottom: 5px;">商品名称:</b>
          <b style="font-size: 16px;display: flex;flex: 1;width: 100%;color: #4a4a4a;">{{goodsItemDetails.goodsName}}</b>
        </div>
      </div>
      <div class="goodsInfo">
        <div style="display: flex;flex-direction: column;text-align: left;flex: 1;">
          <span>规格:<span style="color: red;font-size: 23px;">{{goodsItemDetails.specification}}</span> 个/g/份</span>
          <!-- <p style="border-top: 1px solid #4a4a4a; width: 100%;"></p> -->
          <span>单价:<span style="color: red;font-size: 23px;">￥{{goodsItemDetails.price}}.00</span></span>
        </div>
        <span style="border: 1px solid black;margin: 0 20px;"></span>
        <!--  这个id是用来做页面移动动画用的 -->
        <div id="goodsDetails"  style="align-items: center;display: flex;width: 45%;">
          <div style="width: 100%;">
            剩余商品量:
            <span style="color: red;">
              {{(stockEntity.stockNum - stockEntity.lockStockNum>0)?
              stockEntity.stockNum - stockEntity.lockStockNum:
              '库存不足'}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="goodsDetails">
      <div><h2><span style="border-bottom: 2px solid #722707;color: #722708;box-sizing: border-box;padding: 10px 20px">商品详情</span></h2></div>
      <div class="article" style="box-sizing: border-box;padding: 15px;color: #111111;font-size: 20px;">
          戚风蛋糕是一款甜点，属海绵蛋糕类型，制作原料主要有菜油、鸡蛋、糖、面粉、发粉等。但是由于缺乏牛油蛋糕的浓郁香味，戚风蛋糕通常需要味道浓郁的汁、或加上巧克力、水果等配料。
          由于菜油不像牛油（传统蛋糕都是用牛油的）那样容易打泡，因此需要靠把鸡蛋清打成泡沫状，来提供足够的空气以支撑蛋糕的体积。戚风蛋糕含足量的菜油和鸡蛋，因此质地非常的湿润，不像传统牛油蛋糕那样容易变硬。戚风蛋糕也含较少的饱和脂肪。
        </div>
      <div class="imgs" style="width: 100%;">
        <img src="../../../static/img/bread.png" style="width: 100%;"/>
        <img src="../../../static/img/Tiramisu.png" style="width: 100%;"/>
        <img src="../../../static/img/cakeroll.png" style="width: 100%;"/>
      </div>
      <el-drawer style="width: 100%;"
        title="选择商品数量"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;align-items: center;justify-content: space-around;">
          <p style="display: flex;justify-content: space-around;align-items: center;">
            <span>请选择数量:</span>
            <el-input-number v-model="choiceNum" :min="1" :max="10" label="请选择数量:" style="width: 50%;">
          </el-input-number></p>
          <el-button  type="primary" style="width: 50%;" @click="addToCart(goodsItemDetails.goodsId,choiceNum)">添加到购物车</el-button>
        </div>
      </el-drawer>
    </div>
    <div class="footer">
      <div class="shopCar" @click="gotoCart">
        <i class="el-icon-shopping-cart-1"></i>
        <span>购物车</span>
      </div>
      <el-button class="enterShopCar" @click="enterShopCar(stockEntity)">加入购物车</el-button>
      <el-button class="payForGoods"  @click="locateDetails">商品详情</el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="loginDialogVisible"
      :before-close="closeDialog" style="width: 100%;">
      <span>请先登录</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="goLoginPage">登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    data() {
      return{
        goodsItemDetails:{},
        stockEntity:{},

        loginDialogVisible:false,

        drawer: false,
        direction: 'btt',
        choiceNum:0
      }
    },
    mounted() {
      //执行数据渲染方法
      this.renderMethod()
    },
    methods:{
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null){
          this.$router.push({
            path: lastPage
          });
        }else{
          this.$router.push({
            path: '/home/classify'
          });
        }
      },

      //判断是否登录方法
      isLogin(){
        this.user = JSON.parse(sessionStorage.getItem("visitor"));
        if(this.user == null || this.user == {}){
          return false
        }
        return true;
      },
      closeDialog(){
        this.loginDialogVisible = false;
      },
      //跳转登录页面
      goLoginPage(){
          sessionStorage.setItem("lastPage","/goodsItemDetails")
          this.$router.push({
            path: "/userLogin"
          });
      },

      gotoCart(){
        this.$router.push({
          path: "/home/shopCar"
        });
      },

      //商品数据渲染方法
      renderMethod(){
        if(this.$route.params.goodsItemDetails!=null){
          sessionStorage.setItem("goodsItemDetails",JSON.stringify(this.$route.params.goodsItemDetails));
        }
        this.goodsItemDetails = JSON.parse(sessionStorage.getItem("goodsItemDetails"));
        //查询库存量
        this.queryGoodsStock(this.goodsItemDetails.goodsId);
      },
      //查询库存方法
      queryGoodsStock(goodsId){
        var self = this;
        this.$http.get(`/api`+"/CakeShop/queryStockByGoodsId?goodsId="+goodsId).then(
          res=>{
            if(res.data.code == 200){
              self.stockEntity = res.data.goodsStock
            }
          })
      },

      //加入购物车
      enterShopCar(stockEntity){
        console.log(stockEntity)
        if(this.isLogin()){
          if(stockEntity!=null){
            if(stockEntity.stockNum - stockEntity.lockStockNum>0){
              this.drawer = true
            }else{
              this.$message.error('无法加入购物车,商品库存量不足!');
            }
          }
        }else{
          this.loginDialogVisible = true;
        }
      },
      addToCart(goodsId,goodsNum){
        // console.log('goodsStock:'+this.stockEntity.stockNum)
        // console.log('lockStockNum:'+this.stockEntity.lockStockNum)
        // console.log('goodsNum:'+goodsNum)
        if(!((this.stockEntity.stockNum - this.stockEntity.lockStockNum)>=goodsNum)){
          // this.drawer = false
          this.$message({
            duration: 1000,
            message: "可添加的库存量不足",
            type: "error",
          });
          return;
        }
        var self = this;
        //查询当前用户
        var user = JSON.parse(sessionStorage.getItem("visitor"));
        if(user != null){
          //设置访问后台cookie数据
          this.$cookies.set("userCode",user.userCode);
          this.$cookies.set("token",user.token);
          this.$http.get(`/api/CakeShop/cart/addToCart?goodsId=${goodsId}&goodsNum=${goodsNum}`).then((res)=>{
            if(res.data.code == 200){
              self.$message({
                duration: 1000,
                message: "添加购物车成功",
                type: "success",
                onClose: function() {
                  self.drawer = false
                },
              });
            }else{
              self.$message({
                duration: 1000,
                message: res.data.msg,
                type: "error",
              });
            }
          })
        }
        //清除相关cookie
        this.$cookies.remove("userCode");
        this.$cookies.remove("token");
      },

      //关闭方法
      handleClose(done) {
        this.choiceNum=0
        done();
      },

      //立即购买
      locateDetails(stockEntity){
        document.getElementById('goodsDetails').scrollIntoView({
                    block: 'start',
                    inline: 'nearest',
                    behavior: 'smooth'
                })
      },
    }
  }
</script>

<style>

</style>
<style scoped>
  .header{
    display: flex;
    position: fixed;
    top: 0;
    padding-left: 30px;
    width: 100%;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
  }
  .footer{
    width: 100%;
    height: 50px;
    border-top: 1px solid #b0b0b0;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    display: flex;
  }
  .footer .shopCar{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footer .enterShopCar{
    width: 30%;
    height: 100%;
    color: #fff;
    background-color: #bc794e;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    margin: 0;
  }
  .footer .payForGoods{
    width: 30%;
    height: 100%;
    color: #fff;
    background-color: #732707;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    margin: 0;
  }


  /* 页面布局 */
  .pageClass{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
  }
  .pageClass .goodsItem{
    display: flex;
    box-sizing: border-box;
    padding:10px 20px;
  }
  .pageClass .goodsItem b{
    text-align: left;
  }
  .pageClass .goodsInfo{
    display: flex;
    flex: 1;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px 20px;
    /* font-size: 20px; */
    border-bottom: 1px solid #7f7f7f;
  }

  .goodsDetails{
    margin-bottom: 50px;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
  }
</style>
